<template>
  <div class="pagination">
    <button :disabled="pageNo == 1" @click="$emit('getPageNo', pageNo - 1)">
      上一页
    </button>
    <!-- 前半部依赖于start进行显示隐藏 可以自己慢慢调试即可 -->
    <button
      v-if="startNumAndendNum.start > 1"
      @click="$emit('getPageNo', 1)"
      :class="{ active: pageNo == 1 }"
    >
      1
    </button>
    <button v-if="startNumAndendNum.start > 2">.....</button>



    <!-- 中间连续页码的地方:v-for、数组、对象、数字、字符串 -->
    <!-- 不要遍历总页数那就错了 因为这个地方是展示连续页码的end即为连续页码的总数量你想想时不是
        每个分页必须大于等于连续页码的起始值 才可将其展示 是不是才符合分页器的使用逻辑 你想想是不是这样 -->
    <button
      v-for="(page, index) in startNumAndendNum.end"
      :key="index"
      v-if="page >= startNumAndendNum.start"
      @click="$emit('getPageNo', page)"
      :class="{ active: pageNo == page }"
    >
      {{ page }}
    </button>




    <!-- 这里比较难理解 条件成立：就是当前总页数-1后 还大于当前end值都是需要...的 反之不需要...-->
    <button v-if="startNumAndendNum.end < totalPage - 1">......</button>
    <!-- 后半部依赖于end进行显示隐藏 可以自己慢慢调试即可 -->
    <button
      v-if="startNumAndendNum.end < totalPage"
      @click="$emit('getPageNo', totalPage)"
    >
      {{ totalPage }}
    </button>


    <button
      :disabled="pageNo == totalPage"
      @click="$emit('getPageNo', pageNo + 1)"
    >
      下一页
    </button>


    <button>共{{ total }}数据</button>
  </div>
</template>

<script>
export default {
  name: "MyPagination",
  props: ["pageNo", "pageSize", "total", "continues"],
  //已知:pageNo:当前页 pageSize:每页展示多少条数据 total:整个分页器共多少条数据  continues:分页连续页码数
  computed: {
    // 计算得知：总数/每页总数=总页数
    totalPage() {
      return Math.ceil(this.total / this.pageSize);
    },
    //计算连续页码的起始数字与结束数字
    startNumAndendNum() {
      // 已知连续页码多为奇数 (美观 对称)
      let start = 0,
        end = 0;
      let { pageNo, totalPage, continues } = this;
      // 如果连续页码＞总页数 肯定是不合理的 所以需要先纠正 修改起始值为1 结束值为已知的总页数
      if (continues > totalPage) {
        // log(continues + '>' + totalPage)
        start = 1;
        end = totalPage;
      } else {
        // 正常逻辑
        // 公式:不同连续页码数下 的起始值
        start = pageNo - parseInt(continues / 2);
        // 公式:不同连续页码数下 的结束值 注意: +运算符无隐士转换
        end = Number(pageNo) + Number(parseInt(continues / 2));

        // 不正常:如上述计算出的start小于1(正常逻辑:分页器页码不可能出现0、-1)>>纠正起始值与结束值
        if (start < 1) {
          start = 1; //修正为1
          end = Number(continues); //结束值与连续分页码数相同
        }
        // 不正常:如上述计算出的end超出总页数>>纠正起始值与结束值
        if (end > totalPage) {
          end = Number(totalPage); //正常逻辑:连续页码的结束值不会超出总页数 所以大于总页数时只能是相等
          start = totalPage - continues + 1; //正常逻辑:连续页码结束值超出总页数时 起始值应为总页数-连续页码数+1 这是公式一时想不明白可以记一下。
        }
      }
      //不要忘把自己辛苦维护的两个值给送出去！
      return { start, end };
    },
  },
};
</script>
<style lang="less" scoped>
.pagination {
  text-align: center;
  button {
    margin: 0 5px;
    background-color: #f4f4f5;
    color: #606266;
    outline: none;
    border-radius: 2px;
    padding: 0 4px;
    vertical-align: top;
    display: inline-block;
    font-size: 13px;
    min-width: 35.5px;
    height: 28px;
    line-height: 28px;
    cursor: pointer;
    box-sizing: border-box;
    text-align: center;
    border: 0;

    &[disabled] {
      color: #c0c4cc;
      cursor: not-allowed;
    }

    &.active {
      cursor: not-allowed;
      background-color: #409eff;
      color: #fff;
    }
  }
}
.active {
  background-color: skyblue;
}
</style>

  